const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/index.css",
      chunkFilename: "css/[name].css",
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          name: "vendors",
        },
        bundle: {
          chunks: "async",
          minSize: 1000,
          priority: -20,
          reuseExistingChunk: true,
          name: "bundle",
        },
      },
    },
    minimizer: [new CssMinimizerPlugin()],
  },
  output: {
    filename: "[name].js",
    chunkFilename: "js/[name].js",
    clean: true,
  },
  resolve: {
    alias: {
      "@hooks": path.resolve(__dirname, "../src/hooks"),
      "@utils": path.resolve(__dirname, "../src/utils"),
      "@components": path.resolve(__dirname, "../src/components"),
      "@": path.resolve(__dirname, "../src"),
    },
    extensions: [".mjs", ".js", ".json", ".ts", ".vue"], // 添加 .vue
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.svg$/,
        use: "raw-loader",
      },
      // 新增一个规则用于处理Vue单文件组件中的TypeScript代码
      {
        test: /\.ts?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets:
                      "iOS 9, Android 4.4, last 2 versions, > 0.2%, not dead",
                    useBuiltIns: "usage",
                    corejs: 3,
                  },
                ],
                "@babel/preset-typescript",
              ],
              plugins: [
                "@babel/plugin-transform-typescript",
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-transform-class-properties",
                "@babel/plugin-transform-object-rest-spread",
                "babel-plugin-transform-vue-jsx",
              ],
            },
          },
          {
            loader: "ts-loader",
            options: {
              appendTsSuffixTo: [/\.vue$/],
              transpileOnly: true, // 关闭类型检查
              configFile: path.resolve(__dirname, "../tsconfig.json"), // 确保路径正确
            },
          },
        ],
      },
      {
        test: /\.(css|less)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["postcss-preset-env"],
              },
            },
          },
          "less-loader",
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 25 * 1024, // 25kb
          },
        },
        generator: {
          filename: "assets/imgs/[name].[hash:8][ext]",
        },
      },
    ],
  },
};
